<template>
  <el-main :style="{background: '#ebebeb'}">
    <el-row class="body-card">
      <h3>游记管理</h3>
      <Divider/>
      <el-row :style="{margin: '20px 0'}">
        <el-button type="primary" @click="handleOpen('new')">新建</el-button>
      </el-row>
	          <el-table
          border
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="title"
            label="标题">
          </el-table-column>
          <el-table-column
            prop="author_name"
            label="作者">
          </el-table-column>
          <el-table-column
            prop="class_tag"
            label="栏目">
			 <template slot-scope="scope">
              <span v-if="scope.row.class_tag==='inbound'">国内游</span>
              <span v-else-if="scope.row.class_tag=='abroad'">出境游</span>
              <span v-else-if="scope.row.class_tag=='shopping'">购物圣地</span>
              <span v-else-if="scope.row.class_tag=='article'">旅游文摘</span>
              <span v-else-if="scope.row.class_tag=='spot'">热门景点</span>
              <span v-else-if="scope.row.class_tag=='hotguide'">热门攻略</span> 
            </template>
          </el-table-column>
          <el-table-column
            prop="operation"
            label="操作">
            <template slot-scope="scope">  
			<el-button type="text" @click="handleOpen('edit',scope.row.id,scope.row.title,scope.row.author_name,scope.row.date,scope.row.state,scope.row.content)">修改</el-button>
              <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      <el-row> 
      </el-row>
	       <div style="padding: 20px 0;text-align: right">
             <el-pagination @size-change="()=>shownotelist()" @current-change="()=>shownotelist()" :current-page.sync="current" :page-size="pageSize" :total="total" background layout="prev, pager, next"> </el-pagination>
         
		</div>
    </el-row>
  </el-main>
</template>

<script>
import {
   noteServer,
   notelistServer
} from "../../../api/backstage";
  export default {
    name: "travelNotesManager",
    data() {
      return {
        tableData: [],
        dialogFormVisible: false, 
      total: 0,
      pageSize: 10,
      current: 1
      };
    },
    mounted (){
      this.shownotelist();
    },
    methods: {
      handleOpen(tag, noteid,notetitle,authornme,date,reportstate,note){
        //调用接口获取内容
        this.dialogFormVisible = true;
        const suffix1 = !!noteid ? `travel-notes-${tag}/${noteid}` : `travel-notes-${tag}`;
        const suffix2= !!notetitle ? `/${notetitle}` :  ``;
        const suffix3= !!authornme ? `/${authornme}` : ``;
        const suffix4= !!date ? `/${date}` : ``;
        const suffix5= !!reportstate ? `/${reportstate}` : ``;
        const suffix6= !!note ? `/${note}` : ``;
        this.$router.push({
          path: `/backstage-manager/${suffix1}${suffix2}${suffix3}${suffix4}${suffix5}${suffix6}`
        });
      },
      shownotelist(){
        notelistServer("get", { 
		  params: {
		  pageSize: this.pageSize,
          current: this.current
		  }
        }).then(
        suc => {
          const { code, message, data } = suc.data;
          if (code) {
		  console.log(data);
         const { current, pageSize, total, list } = data;   
			if (Array.isArray(list)) {
              this.tableData = list;
              this.total = total;  
              this.pageSize = pageSize;
              this.current = current;
			  }
          } else {
            this.$message({
              type: "error",
              message
            }); 
		  } 
		  },
        err => {
          this.$message({
            type: "error",
            message: err.message
          });
        })
      },
      handleDelete(noteid) {
        noteServer("delete", {noteid}).then((suc) => {
        })
      }
    }
  };
</script>

<style lang="less">

</style>
